<template>
    <div>
      <el-row :gutter="20">
        <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
    </div>
</template>

<script>
    export default {
        name: "func-home"
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .el-row
    margin-bottom: 20px
    &:last-child
      margin-bottom: 0
  .el-col
    border-radius: 4px
  .bg-purple-dark
    background: white
  .bg-purple
    background: white
  .bg-purple-light
    background: #e5e9f2
  .grid-content
    border-radius: 4px
    min-height: 36px
  .row-bg
    padding: 10px 0
    background-color: #f9fafc
</style>
